<template>
  <!-- 采购订单 售后明细 -->
  <el-dialog title="售后明细" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1300px" append-to-body>
    <!-- <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true">
      <div class="search-box">
       
        <el-form-item label="日期" prop="acctDate">
          <el-date-picker  v-model="queryParams.acctDate" type="date" placeholder="请选择日期"  value-format="yyyyMMdd"  >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置/刷新</el-button>
        </el-form-item>
      </div>
    </el-form> -->
    <div class="table_box app-container" >
      <el-table border :data="tableData.records" stripe>
      
        <el-table-column prop="no" label="售后编号" min-width="120"></el-table-column>
        <el-table-column prop="goodsId" label="商品编号" width="100"></el-table-column>
        
        <el-table-column prop="createTime" label="申请时间" min-width="160"></el-table-column>
        <el-table-column prop="applicantName" label="申请人" min-width="120"></el-table-column>
        <el-table-column prop="afterReasonsName" label="售后原因" min-width="120"></el-table-column>
        <el-table-column prop="afterRemark" label="问题描述" min-width="120"></el-table-column>
        <el-table-column prop="afterAmount" label="售后金额" min-width="120"></el-table-column>
        <el-table-column prop="" label="图片" min-width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.afterImg">
              <el-image style="width: 60px;height: 60px;margin-right: 5px;margin-bottom: 5px;cursor: pointer;" :preview-src-list="getImgs(scope.row.afterImg)" :src="img" v-for="(img,i) in getImgs(scope.row.afterImg)" :key="i"></el-image>
            </div>
          
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态" min-width="120">
          <template slot-scope="scope">
            <span>{{scope.row.status?commonMaps.afterOrderStateMap[scope.row.status]:''}}</span>
          
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total > 10" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
  </el-dialog>

</template>
<script>
import orderApi from "@/api/pickUp/order.js";
import orderAfterApi from "../../../../api/pickUp/afterSale";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      timer: [],
      tableData: {
        records: [],
        total: 0,
      },

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        acctDate: "",
      },
      orderId: "",
      statusMap: {
					1: '已同意',
					2: '已拒绝',
					3: '待处理'
				},
    };
  },
  created() {},
computed:{
  getImgs(){
    return (imgStr)=>{
      let arr = []
      if(imgStr){
        const arrTemp = JSON.parse(imgStr)
        if(arrTemp&&arrTemp.length){
          arrTemp.forEach(item => {
            arr.push(item.url)
          });
        }
      }
      return arr
    }
  }
},  
  methods: {
    open(orderId) {
      this.orderId = orderId
      this.dialogVisible = true;
      this.getList();
    },
    // 获取列表
     getList() {
      this.loading = true;
      orderAfterApi.saleOrderAfterbySaleOrderId(this.orderId).then((res) => {
        this.loading = false;
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.timer = [];
      this.handleQuery();
    },
    resetQuery() {
      this.timer = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        createTimeStart: "",
        createTimeEnd: "",
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.table_box{
  min-height: 600px;
  padding: 0;
  border-radius: 0;

}
</style>
